<template>
  <el-dialog v-model="visible" :title="title" width="600px" draggable align-center>
    <el-form ref="formRef" :model="formData" class="p-2" label-width="120px" :rules="formRules">
      <el-form-item label="排序编码" prop="orderNumber">
        <el-input v-model="formData.orderNumber"></el-input>
      </el-form-item>
      <el-form-item label="手机卡户头" prop="cardAccount">
        <el-input v-model="formData.cardAccount"></el-input>
      </el-form-item>
      <el-form-item label="中介编号">
        <el-input v-model="formData.telephoneBalance"></el-input>
      </el-form-item>
      <el-form-item label="编码或人名" prop="indexId">
        <el-input v-model="formData.indexId"></el-input>
      </el-form-item>
      <el-form-item label="编码备注" prop="indexIdMemo">
        <el-input type="textarea" :autosize="{ minRows: 3,maxRows:3}" v-model="formData.indexIdMemo"></el-input>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="formData.phoneNo"></el-input>
      </el-form-item>
      <el-form-item label="运营商" prop="operatorName">
        <el-select v-model="formData.operatorName" placeholder="请选择">
          <el-option v-for="item in getEnumBySn('operatorName')" :key="item.value"
                     :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="卡类型" prop="phoneType">
        <el-select v-model="formData.phoneType" placeholder="请选择">
          <el-option v-for="item in getEnumBySn('phoneType')" :key="item.value" :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="备注1">
        <el-input v-model="formData.memo"></el-input>
      </el-form-item>
      <el-form-item label="备注2">
        <el-input v-model="formData.telephoneTraffic"></el-input>
      </el-form-item>
      <el-form-item label="备注3">
        <el-input v-model="formData.telephoneMinutes"></el-input>
      </el-form-item>
      <el-form-item label="月租">
        <el-input v-model="formData.telephoneRent"></el-input>
      </el-form-item>
      <el-form-item label="办理时间">
        <el-date-picker v-model="formData.handleTime" value-format="YYYY-MM-DD"
                        placeholder="办理时间" style="width: 200px;"/>
      </el-form-item>
      <el-form-item label="背景颜色">
        <el-color-picker style="width: 120px" v-model="formData.indexIdColor" />
      </el-form-item>
      <el-form-item label="手机号颜色">
        <el-color-picker style="width: 120px" v-model="formData.phoneNoColor" />
      </el-form-item>
      <el-form-item label="手机卡状态" prop="phoneStatus">
        <el-select v-model="formData.phoneStatus" placeholder="请选择">
          <el-option v-for="item in getEnumBySn('phoneStatus')" :key="item.value"
                     :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="confirm" :loading="confirmLoading">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {ElMessage} from "element-plus";

const props = defineProps({
  item: {
    type: Object,
    required: true,
  },

});
const visible = ref(false)
const title = ref("新增")

const formRef = ref()
const formData = ref({})
const type = ref('')

const formRules = {
  orderNumber: [{required: true, message: "排序编码不能为空", trigger: "change"}],
  cardAccount: [{required: true, message: "手机卡户头不能为空", trigger: "change"}],
  indexId: [{required: true, message: "编码或人名不能为空", trigger: "change"}],
  phoneType: [{required: true, message: "卡类型不能为空", trigger: "change"}],
  phoneStatus: [{required: true, message: "手机卡状态不能为空", trigger: "change"}],
}

import request from '@/config/axios'
import {getEnumBySn} from "@/api/enums";

const confirmLoading = ref(false)

const emit = defineEmits(["ok"])
const confirm = async function () {
  await formRef.value?.validate().then((valid) => {
    if (!valid) {
      return
    }
  })
  confirmLoading.value = true
  try {
    const url = {
      'add': '/transferPhone/save',
      'bianji': '/transferPhone/update',
    }
    const response = await request.post({
      url: url[type.value],
      data: formData.value
    })
    visible.value = false
    emit('ok')
    ElMessage.success("保存成功!")
  } catch (error) {
    throw error;
  } finally {
    confirmLoading.value = false

  }
}


defineExpose({
  add: () => {
    visible.value = true
    type.value = 'add'
    formData.value = {phoneStatus:'正常'}
  },
  bianji: (rowData) => {
    console.log('------1-------', rowData)
    visible.value = true
    formData.value = rowData
    type.value = 'bianji'
  },
})

</script>

<style scoped lang="scss"></style>
